<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">

    <title>Treeview Menu - Metro UI :: Popular HTML, CSS and JS library</title>

    <style>
        #menu {
            position: relative;
            width: 90%;
            max-width: 600px;
            background: rgba(0,0,0,.8);
        }

        li {
            font-size: 18px;
            padding: 18px 0!important;
        }

        li ul {
            margin-top: 18px!important;
        }

        .tree-node.expanded {
            padding-bottom: 0!important;
        }

        .caption, .icon, .current .caption {
            color: #fff!important;
        }

        .icon, .node-toggle {
            top: 18px!important;
        }

        .node-toggle::before {
            border-color: #fff!important;
        }

        li {
            position: relative;
        }

        li::before {
            content: "";
            display: block;
            position: absolute;
            z-index: -1;
            height: 56px;
            top: 0;
            right: 0;
            bottom: 0;
            box-shadow: inset 0 -1px #46484a;
        }

        .treeview > li > ul > li > ul > li::before {
            left: -56px;
        }

        .treeview > li > ul > li::before {
            left: -40px;
        }

        .treeview > li::before {
            left: -24px;
        }
    </style>
</head>
<body class="h-vh-100 d-flex flex-align-center flex-justify-center"
      data-role="gradient-box"
      data-gradient-position="115deg"
      data-gradient-colors="rgba(86, 216, 228, 1) 10%, rgba(159, 1, 234, 1) 90%">

    <div id="menu">
        <ul data-role="treeview" data-on-node-click="nodeClick">
            <li data-caption="Item"></li>
            <li data-caption="Group" class="expanded">
                <ul>
                    <li data-caption="Sub Group">
                        <ul>
                            <li data-caption="Item"></li>
                            <li data-caption="Item"></li>
                            <li data-caption="Add New Item" data-icon="<span class='mif-plus'>"></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li data-caption="Item"></li>
            <li data-caption="Item"></li>
            <li data-caption="Add New Item" data-icon="<span class='mif-plus'>"></li>
        </ul>
    </div>

    <script src="../lib/metro.js"></script>
    <script>
        function nodeClick(node){
            var tv = Metro.getPlugin('.treeview', 'treeview');

            if ($(node).attr('data-caption') === "Add New Item") {
                tv.insertBefore(node, {
                    caption: "New Item"
                });
            }
        }
    </script>
</body>
</html>
